<template>
    <el-date-picker
        v-model="formData[item.prop]"
        class="use-date-picker"
        :disabled="disabled || item.disabled"
        :readonly="readonly || item.readonly"
        :type="item.type || 'date'"
        :style="item.style ? item.style : { width: '100%' }"
        :editable="item.editable"
        :clearable="item.clearable"
        :value-format="item.valueFormat"
        :format="item.format"
        :placeholder="item.placeholder"
        :picker-options="item.pickerOptions"
        :default-value="item.defaultValue"
        :range-separator="item.rangeSeparator"
        :start-placeholder="item.startPlaceholder ? item.startPlaceholder : '开始日期'"
        :end-placeholder="item.endPlaceholder ? item.endPlaceholder : '结束日期'"
        :disabled-date="item.disabledDate"
        @change="change"
    />
</template>

<script>
import { defineComponent } from 'vue'
import { useFormProps, changeItem } from './useFormProps'
export default defineComponent({
    name: 'UseDatePicker',
    props: useFormProps,
    emits: ['event'],
    setup(props, context) {
        const change = () => {
            changeItem(context, props)
        }
        return {
            change
        }
    }
})
</script>

<style lang="scss">
.use-date-picker {
  .el-input__wrapper {
    width: 100%;
  }
}
</style>
